const { series, src, dest, watch } = require("gulp");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const sourcemaps = require("gulp-sourcemaps");
const cssnano = require("cssnano");
const rename = require("gulp-rename");
const stylelint = require("stylelint");
const reporter = require("postcss-reporter");

function styles() {
  return src("src/*.css")
    .pipe(sourcemaps.init())
    .pipe(postcss([autoprefixer]))
    .pipe(sourcemaps.write("./maps"))
    .pipe(dest("dest/"));
}

function minified() {
  return src("dest/example.css")
    .pipe(postcss([cssnano]))
    .pipe(rename("example.min.css"))
    .pipe(dest("dest/"));
}

/** 添加校验 */
function lintStyles() {
  return src("src/*.css").pipe(
    postcss([
      stylelint(),
      reporter({
        clearReportedMessages: true,
      }),
    ])
  );
}

function watchFile() {
  console.log("watch src/*.css change running task");
  watch("src/*.css", series(lintStyles, styles, minified));
}

exports.default = watchFile;
